<!-- 占位管理 -->
<template>
  <div class="registration_list">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <BackTitleView title="占位管理" />
        <el-button @click="add" type="primary">新增占位</el-button>
      </div>
      <el-table :data="resultGroupData" border>
        <el-table-column v-for="(item, index) in resultGroupColumn" :key="index" :label="item.label" :prop="item.prop"
          :width="item.width" align="center" />
      </el-table>
      <div class="base_main_margin_top">
        <DataCollectTable :data="data" :total="total" :config="tableConfig" @operationsHander="opHander.receive">
        </DataCollectTable>
      </div>
    </el-main>
    <el-dialog v-model="dialogVisible" :title="title" width="35%" top="10vh" class="base_dialog occupy_dialog">
      <el-form ref="formRef" :model="occupyForm" :rules="occupyRules" label-width="125px">
        <el-form-item label="客人姓名" prop="guestName">
          <el-input v-model="occupyForm.guestName" />
        </el-form-item>
        <el-form-item label="客人电话" prop="phoneNumber">
          <el-input v-model.number="occupyForm.phoneNumber" />
        </el-form-item>
        <el-form-item label="客人身份证号码" prop="idCard">
          <el-input v-model="occupyForm.idCard" />
        </el-form-item>
        <el-form-item label="占位人数" prop="peopleNum">
          <el-input v-model.number="occupyForm.peopleNum" />
        </el-form-item>
        <!-- <el-form-item label="占位日期" prop="b5">
          <el-date-picker
            class="picker"
            v-model="occupyForm.b5"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD 00:00:00"
            :disabled="readOnly"
          />
        </el-form-item> -->
        <el-form-item label="销售人员" prop="sales">
          <el-input v-model="occupyForm.sales" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref } from 'vue';
import useRoute from "@util/router";
import api from "@api/groupRemain";
import $ from "@util/base";
import { $msg, $box } from "@ui/msg";

const route = useRoute()

const total = ref(0)
const data = ref([])

function getOperations(data) {
  // 1050001未确认 1050002确认 1050003取消
  if (data.holderStatus === "1050001") {
    return [OPERATIONS.modify, OPERATIONS.cancelOccupy, OPERATIONS.confirmOccupy]
  }
}

const tableConfig = {
  showIndex: true,
  operations: {
    label: '操作',
    width: 120,
    operations: getOperations
  },
  column: [
    {
      label: '客人姓名',
      prop: 'guestName',
    }, {
      label: '电话',
      prop: 'phoneNumber',
    }, {
      label: '身份证号码',
      prop: 'idCard',
    }, {
      label: '人数',
      prop: 'peopleNum',
      width: 100,
    }, {
      label: '销售人员',
      prop: 'sales',
      width: 150,
    }, {
      label: '占位日期',
      prop: 'createTime',
      width: 150,
    }, {
      label: '占位状态',
      prop: 'holderStatusName',
      width: 100,
    },
  ]
}

const dialogVisible = ref(false)
const title = ref("")

const formRef = ref(null)
const occupyForm = ref({})

const occupyRules = {
  guestName: [{
    required: true,
    message: '请输入客人姓名',
    trigger: 'blur',
  }],
  phoneNumber: [{
    required: true,
    message: '请输入客人电话',
    trigger: 'blur',
  }],
  idCard: [{
    required: true,
    message: '请输入客人身份证号码',
    trigger: 'blur',
  }],
  peopleNum: [{
    required: true,
    message: '请输入占位人数',
    trigger: 'blur',
  }],
  // b5: [{
  //   required: true,
  //   message: '请选择占位日期',
  //   trigger: 'change',
  // }],
  sales: [{
    required: true,
    message: '请输入销售人员',
    trigger: 'blur',
  }],
}

var occupyId = null

function add() {
  title.value = "新增占位"
  occupyId = null
  dialogVisible.value = true
  resetForm()
}

const opHander = operationsHander();
opHander.install(OP_KEY.modify, (data) => {
  title.value = "修改占位"
  occupyId = data.id
  dialogVisible.value = true
  resetForm()
  api.getOccupy(data.id, (val) => {
    occupyForm.value = {
      guestName: val.guestName,
      phoneNumber: val.phoneNumber,
      idCard: val.idCard,
      peopleNum: val.peopleNum,
      sales: val.sales,
      packageCode: val.packageCode,
      holderStatus: val.holderStatus,
    }
  })
});

opHander.install(OP_KEY.cancelOccupy, (data) => {
  $box.open("取消确认", `是否取消${data.name}的占位`, () => {
    api.statusOccupy(data.id, "1050003", () => {
      getData();
      $msg.succ("取消成功");
    });
  });
});

opHander.install(OP_KEY.confirmOccupy, (data) => {
  $box.open("占位确认", `是否确认${data.name}的占位`, () => {
    api.statusOccupy(data.id, "1050002", () => {
      getData();
      $msg.succ("确认成功");
    });
  });
});

const submitForm = (formEl) => {
  occupyForm.value.travelDate = resultGroupData.value[0].startGroupTime
  formEl.validate((valid, fields) => {
    if (valid) {
      if (occupyId) {
        api.updateOccupy(occupyForm.value, occupyId, () => {
          $msg.succ("修改成功")
          dialogVisible.value = false
          getData()
        })
      } else {
        api.addOccupy(occupyForm.value, route.query().package, () => {
          $msg.succ("新增成功")
          dialogVisible.value = false
          getData()
        })
      }
    }
  })
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

const resultGroupData = ref([])

const resultGroupColumn = [
  {
    label: '发团日期',
    prop: 'startGroupTime',
  }, {
    label: '套餐名称+团号',
    prop: 'nameAndCode',
  }, {
    label: '最大收客',
    prop: 'maxHoldVisitor',
    width: 100,
  }, {
    label: '未签/已签合同',
    prop: 'whetherSign',
    width: 150,
  }, {
    label: '未收款/已收款',
    prop: 'whetherReceived',
    width: 150,
  }, {
    label: '占位/已确认',
    prop: 'whetherHolder',
    width: 150,
  }, {
    label: '余位',
    prop: 'surplusSeat',
    width: 100,
  }
]

route.watchRouter("occupymanager", () => { getData() })

function getData() {
  let routeQuery = route.query()
  api.occupyList({
    groupCode: routeQuery.code,
    page: routeQuery.p,
    size: routeQuery.s
  }, val => {
    data.value = val.itemList
    total.value = val.total
    resultGroupData.value = handleResultGroup(val.resultGroupItem)
  })
}

function handleResultGroup(data) {
  let obj = {}
  // 套餐名称+团号
  obj.nameAndCode = `${data.packageName ? data.packageName : '-'}/${data.groupCode}`
  // 未签/已签合同
  obj.whetherSign = `${data.noSign}/${data.isSign}`
  // 未收款/已收款
  obj.whetherReceived = `${data.uncollected}/${data.received}`
  // 占位/已确认
  obj.whetherHolder = `${data.holder}/${data.isHolder}`
  return [{ ...data, ...obj }]
}

getData()
</script>

<style lang="scss">
.occupy_dialog {
  .el-input-number {
    max-width: 100% !important;
  }
}
</style>